<template>
  <div>
    <!-- 表格 -->
  <div>
    <el-table border size='mini' :data="tempData" height="calc(100vh - 350px)" stripe style="width: 100%" >
        <!-- <el-table-column type=index  prop="" label="编号" width="180">
        </el-table-column> -->
        <el-table-column
          align='center'
          prop='id'
          label="编号"
          width="100">
        </el-table-column>
        <el-table-column prop="province" label="省份" width="180">
        </el-table-column>
        <el-table-column prop="city" label="市">
        </el-table-column>
        <el-table-column prop="area" label="区">
        </el-table-column>
        <el-table-column prop="address" label="街道">
        </el-table-column>
        <el-table-column prop="telephone" label="联系方式">
        </el-table-column>
      </el-table>
  </div>
  <div>
      <el-pagination
      :current-page.sync="page"
      :page-sizes="[1,2,3]"
      :page-size="pageSize"
      layout="total,sizes, prev, pager, next"
      :total="addressData.length">
    </el-pagination>
    </div>
  </div>
  
</template>

<script>
import { mapActions, mapGetters, mapState } from 'vuex';
export default {
  data() {
    return {
      id:this.$route.params.id,
      page:1,
      pageSize:2,
    };
  },
  computed: {
    ...mapState('customer',['addressData']),
    tempData(){
      return this.addressData.slice((this.page-1)*this.pageSize,this.page*this.pageSize)
    }
  },
  methods: {
    ...mapActions('customer',['findAddressByCId']),
    
  },
  created() {
    // console.log(this.$route.params.id,'-------');
    this.findAddressByCId({id:this.id});
  },
  mounted() {}
};
</script>
<style lang="less" scoped>
</style>